<template>
  <view class="search-page-container">
    <cu-custom bgColor="bg-white" :isBack="true">
      <template v-slot:content><text class="text-black text-bold">搜索</text></template>
    </cu-custom>

    <!-- 独立的搜索栏 -->
    <view class="search-bar-container">
      <view class="search-form round">
        <text class="cuIcon-search"></text>
        <input class="search-input" type="text" placeholder="搜索商家或商品" v-model="keyword" @confirm="performSearch" />
      </view>
      <view class="action">
        <button class="cu-btn bg-gradual-green shadow-blur round" @click="performSearch">搜索</button>
      </view>
    </view>

    <!-- 加载提示 -->
    <view v-if="loading" class="feedback-container">
      <view class="cu-load loading"></view>
      <view class="text-gray margin-top-sm">正在努力搜索...</view>
    </view>

    <!-- 空状态提示 -->
    <view v-else-if="groupedResults.length === 0" class="feedback-container">
      <text class="cuIcon-discover text-gray" style="font-size: 100rpx;"></text>
      <view class="text-gray margin-top-sm">未能找到与"{{ keyword }}"相关的结果</view>
    </view>
    
    <!-- 结果列表 -->
    <scroll-view v-else scroll-y class="results-list">
      <view class="merchant-card" v-for="merchant in groupedResults" :key="merchant.mer_id" @click="goToMerchant(merchant.mer_id)">
        <!-- 商家头部信息 -->
        <view class="merchant-header">
          <image class="merchant-avatar" :src="merchant.icon || '/static/logo.png'"></image>
          <view class="flex-sub">
            <view class="merchant-name">{{ merchant.mer_name }}</view>
            <view class="merchant-meta">
              <text class="text-orange">{{ merchant.mer_score }}分</text>
            </view>
          </view>
        </view>

        <!-- 商品横向滚动列表 -->
        <scroll-view scroll-x class="goods-scroll-list">
          <view class="goods-card" v-for="good in merchant.goods" :key="good.good_id">
            <image class="goods-image" :src="good.good_icon" mode="aspectFill"></image>
            <view class="goods-name">{{ good.good_name }}</view>
            <view class="goods-price">¥{{ good.good_price }}</view>
          </view>
        </scroll-view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { get } from '@/utils/request.js';

const keyword = ref('');
const loading = ref(true);
const groupedResults = ref([]);

onLoad((options) => {
  keyword.value = decodeURIComponent(options.keyword || '');
  if (keyword.value) {
    fetchSearchResults();
  } else {
    loading.value = false;
  }
});

const performSearch = () => {
	if (!keyword.value.trim()) {
		uni.showToast({
			title: '请输入搜索内容',
			icon: 'none'
		});
		return;
	}
	fetchSearchResults();
};

const fetchSearchResults = async () => {
  loading.value = true;
  try {
    const res = await get(`/merchant/searchMerchant?search=${encodeURIComponent(keyword.value)}`);
    if (res.data && res.data.msg) {
      groupedResults.value = groupDataByMerchant(res.data.msg);
    }
  } catch (error) {
    console.error('搜索失败', error);
  } finally {
    loading.value = false;
  }
};

const groupDataByMerchant = (data) => {
  const merchantMap = new Map();
  data.forEach(item => {
    if (!merchantMap.has(item.mer_id)) {
      merchantMap.set(item.mer_id, {
        mer_id: item.mer_id,
        mer_name: item.mer_name,
        mer_score: item.mer_score,
        icon: item.icon,
        goods: []
      });
    }
    merchantMap.get(item.mer_id).goods.push({
      good_id: item.good_id,
      good_name: item.good_name,
      good_price: item.good_price,
      good_icon: item.good_icon
    });
  });
  return Array.from(merchantMap.values());
};

const goToMerchant = (merchantId) => {
  uni.navigateTo({
    url: `/pages/merchat/index?id=${merchantId}`
  });
};
</script>

<style scoped>
.search-page-container {
  background-color: #fff;
  height: 100vh;
  padding-bottom: 20rpx;
}

/* 搜索栏样式 */
.search-bar-container {
  background-color: #ffffff;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
}

.search-form {
  flex: 1;
  background-color: #f2f2f2;
  height: 70rpx;
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  padding: 0 25rpx;
}

.cuIcon-search {
  font-size: 36rpx;
  color: #999;
  margin-right: 10rpx;
}

.search-input {
  height: 100%;
  font-size: 28rpx;
  flex: 1;
}

.action .cu-btn {
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  padding: 0 30rpx;
  margin-left: 20rpx;
}

/* 商家卡片样式 */
.merchant-card {
  padding: 0;
  margin: 0 30rpx;
  border-radius: 16rpx;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
  border: 1rpx solid #f2f2f2;
  margin-top: 30rpx;
}

.merchant-header {
  padding: 24rpx 24rpx 0 24rpx;
  display: flex;
  align-items: flex-start;
}

.merchant-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.flex-sub {
  flex: 1;
  overflow: hidden;
}

.merchant-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.merchant-meta {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  flex-wrap: wrap;
}

.text-orange {
  color: #ffa200;
  font-size: 24rpx;
  margin-right: 15rpx;
  position: relative;
  font-weight: 500;
}

.text-orange::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 24rpx;
  background-color: #ddd;
  right: -8rpx;
  top: 50%;
  transform: translateY(-50%);
}

.meta-item {
  font-size: 22rpx;
  color: #999;
  margin-right: 15rpx;
  position: relative;
}

.meta-item::after {
  content: '';
  position: absolute;
  width: 1px;
  height: 24rpx;
  background-color: #ddd;
  right: -8rpx;
  top: 50%;
  transform: translateY(-50%);
}

.meta-item:last-child::after {
  display: none;
}

/* 促销标签 */
.promotion-tags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15rpx;
}

.promotion-tag {
  background: linear-gradient(to right, #fff7f7, #fef0f0);
  color: #e93b3b;
  font-size: 22rpx;
  padding: 0 12rpx;
  height: 36rpx;
  line-height: 36rpx;
  border-radius: 6rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border: 1rpx solid #f3e3e3;
}

.promotion-tag.hot {
  background: linear-gradient(to right, #fffaf0, #fff4e0);
  color: #ff7b0d;
  border-color: #f7e5d1;
}

.promotion-tag.discount {
  background: linear-gradient(to right, #fff0f8, #ffe8f3);
  color: #ff1d89;
  border-color: #f9d3e5;
}

/* 商品横向滚动列表 */
.goods-scroll-list {
  margin-top: 10rpx;
  padding: 0 24rpx 24rpx;
  white-space: nowrap;
  width: 100%;
}

.goods-card {
  display: inline-block;
  width: 170rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  background: #f7f8fa;
  padding: 15rpx 10rpx;
  vertical-align: top;
  white-space: normal;
}

.goods-image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
  background-color: #f2f2f2;
}

.goods-name {
  font-size: 24rpx;
  color: #333;
  margin-top: 12rpx;
  padding: 0 5rpx;
  line-height: 1.4;
  height: 34rpx * 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.goods-price {
  font-size: 28rpx;
  color: #e93b3b;
  font-weight: bold;
  margin-top: 10rpx;
  text-align: center;
}

/* 空状态提示 */
.feedback-container {
  padding-top: 200rpx;
  text-align: center;
}

.cuIcon-discover {
  font-size: 140rpx !important;
  opacity: 0.3;
}

.text-gray {
  color: #999;
  font-size: 28rpx;
}
</style>